<template>
    <div id="myfocus">
      <f-back cen="我的关注"></f-back>
      <div class="cont" v-for="(item, index) in list" :key="index">
        <div class="cont-t">
          <span class="per">
            <van-image
              width="50px"
              height="50"
              :src="item.head_url"
              fit="cover"
              round></van-image>
            <!--          <img src="./xin.jpg" alt="">-->
          </span>
          <span class="nam">{{ item.real_name }}</span>
        </div>
        <div class="cont-b">{{ item.content }}</div>
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(it, indeed) in item.image_url" :key="indeed">
            <van-image fit="cover" :src="it" />
          </van-grid-item>
        </van-grid>
        <f-sou :num1="item.like_num" :num2="item.collect_num" :num3="item.comment_num"></f-sou>
      </div>
      <span class="text" v-html="text"></span>
    </div>
</template>

<script>
import FBack from '../../components/back/back'
import FSou from '../../components/shoucang/shoucang'
import { Image, Grid, GridItem } from 'vant'
import 'vant/lib/image/style'
import 'vant/lib/grid-item/style'
import 'vant/lib/grid/style'
import { getquanzi } from '../api'

const uid = window.location.href.split('?')[1].split('=')[1]

export default {
  name: 'myfocus',
  data () {
    return {
      list: [],
      text: ''
    }
  },
  created () {
    getquanzi({
      uid
    }).then((res) => {
      this.list = res
      if (this.list === null) {
        this.text = '<p>目前还没有发布什么内容</p>'
      }
    }).then(() => {
      this.list.forEach((item) => {
        const imgs = item.image_url.split(',')
        item.image_url = imgs
      })
    })
  },
  components: {
    FBack,
    FSou,
    [Image.name]: Image,
    [GridItem.name]: GridItem,
    [Grid.name]: Grid
  }
}
</script>

<style scoped>
  .cont {}
  .cont-t {
    width: 94%;
    height: 50px;
    padding: 0 3%;
    margin: 5px;
  }
  .cont-t span {
    float: left;
  }
  .cont-t .per {;
    margin-right: 10px;
  }
  .nam {
    margin-top: 15px;
  }
  .cont-b {
    padding: 0 3%;
    word-break: break-all;
  }
  .text {
    width: 100%;
    position: absolute;
    text-align: center;
    margin-top: 30%;
    color: #C8C9CC;
  }
</style>
